<template>
  <VueEchart :option="options" style="width: 100%;height: 11px;" />
</template>
<!--频谱进度条-->
<script>
import VueEchart, { echarts } from "./VueEchart";
export default {
  name: "SpectrumProgress",
  components: {
    VueEchart
  },
  props: {
    // 背景色
    backgroundColor: {
      type: Array,
      default: () => ["#005687", "#005687"]
    },
    // 前景色
    foregroundColor: {
      type: Array,
      default: () => ["#06FFDB", "#00E2A2"]
    },
    value: {
      type: Number,
      default: 50
    },
    total: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {};
  },
  computed: {
    options() {
      const total = this.total;
      const currentVal = this.value;
      const backgroundColor = this.backgroundColor;
      const foregroundColor = this.foregroundColor;
      const list = [{ name: "盐田河右三支", value: currentVal }];

      const yAxisData = list.map(item => item.name);
      const values = list.map(item => item.value);
      var option = {
        // backgroundColor: 'black',
        grid: {
          top: "0%",
          bottom: "0%",
          right: "0%",
          left: "0%"
        },
        xAxis: {
          max: total,
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        yAxis: [
          {
            data: yAxisData,
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: {
              show: false
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: "#48D2FE"
              }
            }
          }
        ],
        series: [
          {
            type: "pictorialBar",
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbol: "rect",
            symbolSize: [3, 12],
            symbolMargin: 1,
            itemStyle: {
              normal: {
                // 颜色渐变函数 前四个参数分别表示四个位置依次为
                // 右下左上
                color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  backgroundColor.map(cl => {
                    return {
                      offset: 0 / (backgroundColor.length - 1),
                      color: cl
                    };
                  }),
                  false
                ),
                borderRadius: 2
              }
            },
            label: {
              normal: {
                show: false
              }
            },
            data: values,
            z: 0,
            animationEasing: "elasticOut"
          },
          {
            //分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                // 颜色渐变函数 前四个参数分别表示四个位置依次为
                // 右下左上
                color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  // [
                  //   {
                  //     offset: 0,
                  //     color: '#00E2A2' // 0% 处的颜色
                  //   },
                  //   {
                  //     offset: 1,
                  //     color: '#06FFDB' // 100% 处的颜色
                  //   }
                  // ],
                  foregroundColor.map(cl => {
                    return {
                      offset: 0 / (foregroundColor.length - 1),
                      color: cl
                    };
                  }),
                  false
                )
              }
            },
            symbolRepeat: "fixed",
            symbolMargin: 1,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [3, 12],
            symbolPosition: "start",
            data: list,
            z: 2,
            animationEasing: "elasticOut"
          }
        ]
      };

      return option;
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {}
};
</script>
<style lang="scss" scoped></style>
